<template>
	<view class="msg-wrap">
		<image :src="msg.localUrl||msg.saveImg||info.imgUrl" :style="{width: `${layout.w}rpx`,height:`${layout.h}rpx`}" class="msg_pic" mode="aspectFill"/>
		<view class="progress" v-if="msg.status=='loading'">
			<view class="inner-bar" :style="{width: `${msg.progress||0}%`}"></view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			info:{
				required:true,
				type:Object
			},
			msg:{
				required:true,
				type:Object
			}
		},
		computed:{
			layout(){
				const maxW = 360
				const maxH = 400
				const startSize = 100
				const ratio = this.info.height?(this.info.width/this.info.height):1
				if(this.info.width<startSize&&this.info.height<startSize){
					return{
						w:this.info.width,
						h:this.info.height
					}
				}
				if(ratio<1){
					return {
						w:Math.max(maxH*ratio,110),
						h:maxH
					}
				}else{
					return {
						w:maxW,
						h:Math.max(maxW/ratio,110)
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.msg-wrap{
		position: relative;
		.progress{
			position: absolute;
			left: 0;
			bottom: 0;
			right: 0;
			height: 14rpx;
			background-color: rgba($color:#000000, $alpha:0.5);
			border-radius: 0 0 10rpx 10rpx;
			overflow: hidden;
		}
		.inner-bar{
			height: 100%;
			background-color: #007aff;
		}
	}
	.msg_pic{
		max-width: 500rpx;
		max-height: 600rpx;
		border-radius: 10rpx;
	}
</style>
